<template>
  <div style="padding: 8px">
    <el-button type="primary" style="margin-bottom: 8px" @click="addPayRecordDialogVisible = true"
      >新增记录</el-button
    >
    <el-button style="margin-bottom: 8px" @click="clearCache">清除缓存</el-button>
    <h2>账单</h2>
    <el-table :data="accountBookStore.payRecordsVO" border style="width: 100%">
      <el-table-column type="index" width="50" />
      <el-table-column prop="date" label="日期" />
      <el-table-column prop="item" label="项目" />
      <el-table-column prop="remark" label="备注说明" />
      <el-table-column prop="payNum" label="金额" />
      <el-table-column prop="payPeople" label="支付人" />
      <el-table-column
        v-for="(peopleItem, peopleIndex) in accountBookStore.peoples"
        :key="peopleIndex"
        :prop="peopleItem"
        :label="peopleItem"
      />
    </el-table>
    <h2>个人应付/收</h2>
    <el-table :data="accountBookStore.totalPayable" border style="width: 100%; margin-top: 8px">
      <el-table-column type="index" width="50" />
      <el-table-column prop="people" label="人员" />
      <el-table-column prop="payable" label="应付" />
      <el-table-column prop="receivable" label="应收" />
      <el-table-column prop="realPayable" label="实际应付（负数则为应收）" />
    </el-table>
    <h2>转款方案一</h2>
    <el-table :data="accountBookStore.settlementList" border style="width: 100%; margin-top: 8px">
      <el-table-column type="index" width="50" />
      <el-table-column prop="payer" label="应付方" sortable />
      <el-table-column prop="payee" label="应收方" sortable />
      <el-table-column prop="value" label="应收款" sortable />
    </el-table>

    <el-dialog v-model="addPayRecordDialogVisible" title="新增记录" append-to-body>
      <el-form :model="form" label-width="120px">
        <el-form-item label="日期">
          <el-date-picker
            v-model="form.date"
            type="date"
            placeholder="日期"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>
        <el-form-item label="项目">
          <el-input v-model="form.item" placeholder="项目" />
        </el-form-item>
        <el-form-item label="备注说明">
          <el-input v-model="form.remark" placeholder="备注说明" />
        </el-form-item>
        <el-form-item label="金额">
          <el-input-number v-model="form.payNum" :precision="2" :step="1" />
        </el-form-item>
        <el-form-item label="支付人">
          <el-select v-model="form.payPeople" placeholder="支付人" style="width: 100%">
            <el-option
              v-for="(peopleItem, peopleIndex) in accountBookStore.peoples"
              :key="peopleIndex"
              :label="peopleItem"
              :value="peopleItem"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="参与人员">
          <el-select v-model="form.peoples" multiple placeholder="参与人员" style="width: 100%">
            <el-option
              v-for="(peopleItem, peopleIndex) in accountBookStore.peoples"
              :key="peopleIndex"
              :label="peopleItem"
              :value="peopleItem"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="addPayRecordDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="addConfirm"> 确认 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useAccountBookStore } from '@/stores/accountBook'

const accountBookStore = useAccountBookStore()

const addPayRecordDialogVisible = ref(false)

const form = ref({
  date: '',
  item: '',
  remark: '',
  payNum: '',
  payPeople: '',
  peoples: ''
})

function addConfirm() {
  accountBookStore.addPayRecord({ ...form.value })
  addPayRecordDialogVisible.value = false
}

function clearCache() {
  localStorage.clear()
}
</script>

<style lang="scss" scoped></style>
